<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站分享弹出组件</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #4F46E5;
      --secondary: #10B981;
      --danger: #EF4444;
      --light: #F9FAFB;
      --dark: #1F2937;
      --border-light: #E5E7EB;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f0f2f5;
      color: var(--dark);
      padding: 20px;
      min-height: 100vh;
    }
    
    .container {
      max-width: 400px;
      margin: 0 auto;
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    
    /* 帖子样式 */
    .post {
      padding: 16px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .post-header {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }
    
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(--primary);
      margin-right: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
    }
    
    .user-info {
      flex: 1;
    }
    
    .username {
      font-weight: 600;
      font-size: 15px;
    }
    
    .post-time {
      font-size: 12px;
      color: #6B7280;
    }
    
    .post-content {
      margin-bottom: 16px;
      line-height: 1.5;
    }
    
    .post-image {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 16px;
    }
    
    .post-actions {
      display: flex;
      justify-content: space-around;
    }
    
    .post-action {
      display: flex;
      align-items: center;
      color: #6B7280;
      background: none;
      border: none;
      font-size: 14px;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 4px;
    }
    
    .post-action:hover {
      background-color: #F3F4F6;
    }
    
    .post-action.share-btn {
      color: var(--primary);
    }
    
    /* 分享弹出层基础样式 */
    .share-modal {
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1050;
      display: none;
      align-items: flex-end;
      justify-content: center;
    }
    
    .share-modal.show {
      display: flex;
      animation: fadeIn 0.2s ease;
    }
    
    .share-content {
      width: 100%;
      max-width: 400px;
      background-color: white;
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }
    
    .share-modal.show .share-content {
      transform: translateY(0);
    }
    
    .share-header {
      padding: 16px;
      border-bottom: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .share-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .close-btn {
      background: none;
      border: none;
      font-size: 20px;
      color: #6B7280;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .close-btn:hover {
      background-color: #F3F4F6;
    }
    
    .share-body {
      padding: 16px;
    }
    
    .share-options {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 24px;
    }
    
    .share-option {
      flex: 1;
      min-width: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      color: var(--dark);
    }
    
    .share-icon {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-bottom: 8px;
    }
    
    .share-label {
      font-size: 13px;
      font-weight: 500;
      text-align: center;
    }
    
    .share-footer {
      padding: 16px;
      border-top: 1px solid var(--border-light);
    }
    
    .share-action-btn {
      width: 100%;
      padding: 12px;
      border-radius: 8px;
      border: none;
      font-weight: 500;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    
    .cancel-btn {
      background-color: #F3F4F6;
      color: var(--dark);
      margin-top: 12px;
    }
    
    /* 样式1: 标准网格分享 */
    .share-style-1 .share-icon {
      background-color: #F3F4F6;
    }
    
    .share-style-1 .share-option:nth-child(1) .share-icon { color: #1877F2; }
    .share-style-1 .share-option:nth-child(2) .share-icon { color: #1DA1F2; }
    .share-style-1 .share-option:nth-child(3) .share-icon { color: #25D366; }
    .share-style-1 .share-option:nth-child(4) .share-icon { color: #FF0000; }
    .share-style-1 .share-option:nth-child(5) .share-icon { color: #0A66C2; }
    .share-style-1 .share-option:nth-child(6) .share-icon { color: #EA4335; }
    
    /* 样式2: 品牌色背景 */
    .share-style-2 .share-option:nth-child(1) .share-icon { 
      background-color: #1877F2; 
      color: white;
    }
    .share-style-2 .share-option:nth-child(2) .share-icon { 
      background-color: #1DA1F2; 
      color: white;
    }
    .share-style-2 .share-option:nth-child(3) .share-icon { 
      background-color: #25D366; 
      color: white;
    }
    .share-style-2 .share-option:nth-child(4) .share-icon { 
      background-color: #FF0000; 
      color: white;
    }
    .share-style-2 .share-option:nth-child(5) .share-icon { 
      background-color: #0A66C2; 
      color: white;
    }
    .share-style-2 .share-option:nth-child(6) .share-icon { 
      background-color: #EA4335; 
      color: white;
    }
    
    /* 样式3: 带预览卡片 */
    .share-style-3 .preview-card {
      background-color: #F9FAFB;
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 24px;
      border: 1px solid var(--border-light);
    }
    
    .preview-header {
      display: flex;
      margin-bottom: 12px;
    }
    
    .preview-favicon {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background-color: var(--primary);
      margin-right: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 12px;
    }
    
    .preview-domain {
      font-size: 12px;
      color: #6B7280;
      align-self: center;
    }
    
    .preview-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.3;
    }
    
    .preview-image {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 8px;
    }
    
    .preview-excerpt {
      font-size: 12px;
      color: #6B7280;
      line-height: 1.4;
    }
    
    /* 样式4: 带好友列表 */
    .share-style-4 .section-title {
      font-size: 14px;
      color: #6B7280;
      margin-bottom: 12px;
      font-weight: 500;
    }
    
    .friends-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 24px;
      max-height: 200px;
      overflow-y: auto;
    }
    
    .friend-item {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 8px;
      cursor: pointer;
    }
    
    .friend-item:hover {
      background-color: #F3F4F6;
    }
    
    .friend-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #E5E7EB;
      margin-right: 12px;
      overflow: hidden;
    }
    
    .friend-info {
      flex: 1;
    }
    
    .friend-name {
      font-size: 15px;
      font-weight: 500;
    }
    
    .friend-status {
      font-size: 12px;
      color: #6B7280;
    }
    
    .select-friend {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid #6B7280;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .select-friend.selected {
      border-color: var(--primary);
      background-color: var(--primary);
      color: white;
    }
    
    /* 样式5: 简洁版 */
    .share-style-5 .share-options {
      gap: 8px;
    }
    
    .share-style-5 .share-option {
      min-width: 60px;
    }
    
    .share-style-5 .share-icon {
      width: 48px;
      height: 48px;
      font-size: 20px;
      border-radius: 8px;
      background-color: #F3F4F6;
    }
    
    .share-style-5 .share-label {
      font-size: 12px;
    }
    
    .share-style-5 .share-footer {
      padding-top: 0;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid var(--border-light);
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .switcher-option:hover {
      background-color: #F3F4F6;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 动画 */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">分享样式</div>
    <div class="switcher-option active" data-style="1">标准网格</div>
    <div class="switcher-option" data-style="2">品牌色背景</div>
    <div class="switcher-option" data-style="3">带预览卡片</div>
    <div class="switcher-option" data-style="4">带好友列表</div>
    <div class="switcher-option" data-style="5">简洁版</div>
  </div>
  
  <!-- 帖子内容 -->
  <div class="container">
    <div class="post">
      <div class="post-header">
        <div class="avatar">ZL</div>
        <div class="user-info">
          <div class="username">张磊</div>
          <div class="post-time">今天 14:30</div>
        </div>
      </div>
      <div class="post-content">
        刚刚发现了一个超棒的设计资源网站，里面有很多高质量的UI组件和模板，推荐给大家！
      </div>
      <img src="https://picsum.photos/600/300" alt="分享图片" class="post-image">
      <div class="post-actions">
        <button class="post-action">
          <i class="fa fa-thumbs-o-up"></i> 点赞
        </button>
        <button class="post-action">
          <i class="fa fa-comment-o"></i> 评论
        </button>
        <button class="post-action share-btn" id="shareBtn">
          <i class="fa fa-share-alt"></i> 分享
        </button>
      </div>
    </div>
  </div>
  
  <!-- 1. 标准网格分享弹出层 -->
  <div class="share-modal share-style-1" id="shareModal1">
    <div class="share-content">
      <div class="share-header">
        <h3 class="share-title">分享到</h3>
        <button class="close-btn" data-modal="1">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-body">
        <div class="share-options">
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-facebook"></i>
            </div>
            <span class="share-label">Facebook</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-twitter"></i>
            </div>
            <span class="share-label">Twitter</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-whatsapp"></i>
            </div>
            <span class="share-label">WhatsApp</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-youtube-play"></i>
            </div>
            <span class="share-label">YouTube</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-linkedin"></i>
            </div>
            <span class="share-label">LinkedIn</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-envelope-o"></i>
            </div>
            <span class="share-label">邮件</span>
          </a>
        </div>
      </div>
      <div class="share-footer">
        <button class="share-action-btn" style="background-color: var(--primary); color: white;">
          <i class="fa fa-link"></i> 复制链接
        </button>
        <button class="share-action-btn cancel-btn" data-modal="1">取消</button>
      </div>
    </div>
  </div>
  
  <!-- 2. 品牌色背景分享弹出层 -->
  <div class="share-modal share-style-2" id="shareModal2">
    <div class="share-content">
      <div class="share-header">
        <h3 class="share-title">分享内容</h3>
        <button class="close-btn" data-modal="2">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-body">
        <div class="share-options">
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-facebook"></i>
            </div>
            <span class="share-label">Facebook</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-twitter"></i>
            </div>
            <span class="share-label">Twitter</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-whatsapp"></i>
            </div>
            <span class="share-label">WhatsApp</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-youtube-play"></i>
            </div>
            <span class="share-label">YouTube</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-linkedin"></i>
            </div>
            <span class="share-label">LinkedIn</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-envelope-o"></i>
            </div>
            <span class="share-label">邮件</span>
          </a>
        </div>
      </div>
      <div class="share-footer">
        <button class="share-action-btn" style="background-color: var(--primary); color: white;">
          <i class="fa fa-link"></i> 复制链接
        </button>
        <button class="share-action-btn cancel-btn" data-modal="2">取消</button>
      </div>
    </div>
  </div>
  
  <!-- 3. 带预览卡片分享弹出层 -->
  <div class="share-modal share-style-3" id="shareModal3">
    <div class="share-content">
      <div class="share-header">
        <h3 class="share-title">分享链接</h3>
        <button class="close-btn" data-modal="3">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-body">
        <div class="preview-card">
          <div class="preview-header">
            <div class="preview-favicon">D</div>
            <div class="preview-domain">design-resources.com</div>
          </div>
          <div class="preview-title">2023年最佳UI设计资源合集 - 包含模板、组件和图标</div>
          <img src="https://picsum.photos/600/300" alt="预览图" class="preview-image">
          <div class="preview-excerpt">精选高质量设计资源，帮助设计师快速构建美观界面，提升工作效率...</div>
        </div>
        
        <div class="share-options">
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-facebook"></i>
            </div>
            <span class="share-label">Facebook</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-twitter"></i>
            </div>
            <span class="share-label">Twitter</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-whatsapp"></i>
            </div>
            <span class="share-label">WhatsApp</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-linkedin"></i>
            </div>
            <span class="share-label">LinkedIn</span>
          </a>
        </div>
      </div>
      <div class="share-footer">
        <button class="share-action-btn" style="background-color: var(--primary); color: white;">
          <i class="fa fa-link"></i> 复制链接
        </button>
        <button class="share-action-btn cancel-btn" data-modal="3">取消</button>
      </div>
    </div>
  </div>
  
  <!-- 4. 带好友列表分享弹出层 -->
  <div class="share-modal share-style-4" id="shareModal4">
    <div class="share-content">
      <div class="share-header">
        <h3 class="share-title">分享给好友</h3>
        <button class="close-btn" data-modal="4">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-body">
        <div class="section-title">推荐好友</div>
        <div class="friends-list">
          <div class="friend-item">
            <div class="friend-avatar" style="background-color: #3B82F6;"></div>
            <div class="friend-info">
              <div class="friend-name">王小明</div>
              <div class="friend-status">在线</div>
            </div>
            <div class="select-friend">
              <i class="fa fa-check" style="font-size: 14px; display: none;"></i>
            </div>
          </div>
          <div class="friend-item">
            <div class="friend-avatar" style="background-color: #10B981;"></div>
            <div class="friend-info">
              <div class="friend-name">李华</div>
              <div class="friend-status">10分钟前在线</div>
            </div>
            <div class="select-friend">
              <i class="fa fa-check" style="font-size: 14px; display: none;"></i>
            </div>
          </div>
          <div class="friend-item">
            <div class="friend-avatar" style="background-color: #EF4444;"></div>
            <div class="friend-info">
              <div class="friend-name">张伟</div>
              <div class="friend-status">今天在线</div>
            </div>
            <div class="select-friend">
              <i class="fa fa-check" style="font-size: 14px; display: none;"></i>
            </div>
          </div>
          <div class="friend-item">
            <div class="friend-avatar" style="background-color: #8B5CF6;"></div>
            <div class="friend-info">
              <div class="friend-name">刘芳</div>
              <div class="friend-status">离线</div>
            </div>
            <div class="select-friend">
              <i class="fa fa-check" style="font-size: 14px; display: none;"></i>
            </div>
          </div>
        </div>
        
        <div class="section-title">其他方式</div>
        <div class="share-options">
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-facebook"></i>
            </div>
            <span class="share-label">Facebook</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-twitter"></i>
            </div>
            <span class="share-label">Twitter</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-link"></i>
            </div>
            <span class="share-label">复制链接</span>
          </a>
        </div>
      </div>
      <div class="share-footer">
        <button class="share-action-btn" style="background-color: var(--primary); color: white;">
          <i class="fa fa-paper-plane"></i> 发送给选中的人
        </button>
        <button class="share-action-btn cancel-btn" data-modal="4">取消</button>
      </div>
    </div>
  </div>
  
  <!-- 5. 简洁版分享弹出层 -->
  <div class="share-modal share-style-5" id="shareModal5">
    <div class="share-content">
      <div class="share-header">
        <h3 class="share-title">分享</h3>
        <button class="close-btn" data-modal="5">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-body">
        <div class="share-options">
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-facebook"></i>
            </div>
            <span class="share-label">脸书</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-twitter"></i>
            </div>
            <span class="share-label">推特</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-whatsapp"></i>
            </div>
            <span class="share-label">WhatsApp</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-linkedin"></i>
            </div>
            <span class="share-label">领英</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-link"></i>
            </div>
            <span class="share-label">链接</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-envelope-o"></i>
            </div>
            <span class="share-label">邮件</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-clipboard"></i>
            </div>
            <span class="share-label">收藏</span>
          </a>
          <a href="#" class="share-option">
            <div class="share-icon">
              <i class="fa fa-flag-o"></i>
            </div>
            <span class="share-label">举报</span>
          </a>
        </div>
      </div>
      <div class="share-footer">
        <button class="share-action-btn cancel-btn" data-modal="5">取消</button>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前选中的分享样式
    let currentShareStyle = 1;
    
    // 获取DOM元素
    const shareBtn = document.getElementById('shareBtn');
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const modals = {
      1: document.getElementById('shareModal1'),
      2: document.getElementById('shareModal2'),
      3: document.getElementById('shareModal3'),
      4: document.getElementById('shareModal4'),
      5: document.getElementById('shareModal5')
    };
    
    // 关闭所有模态框
    function closeAllModals() {
      Object.values(modals).forEach(modal => {
        modal.classList.remove('show');
      });
    }
    
    // 打开当前选中的模态框
    function openCurrentModal() {
      closeAllModals();
      modals[currentShareStyle].classList.add('show');
    }
    
    // 分享按钮点击事件
    shareBtn.addEventListener('click', openCurrentModal);
    
    // 样式切换事件
    switcherOptions.forEach(option => {
      option.addEventListener('click', function() {
        // 更新选中状态
        switcherOptions.forEach(opt => opt.classList.remove('active'));
        this.classList.add('active');
        
        // 更新当前样式
        currentShareStyle = parseInt(this.getAttribute('data-style'));
      });
    });
    
    // 关闭按钮事件委托
    document.addEventListener('click', function(e) {
      const closeBtn = e.target.closest('[data-modal]');
      if (closeBtn) {
        const modalId = closeBtn.getAttribute('data-modal');
        modals[modalId].classList.remove('show');
      }
    });
    
    // 点击模态框背景关闭
    document.addEventListener('click', function(e) {
      if (e.target.classList.contains('share-modal')) {
        closeAllModals();
      }
    });
    
    // 好友选择功能
    const friendItems = document.querySelectorAll('.friend-item');
    friendItems.forEach(item => {
      const selectBox = item.querySelector('.select-friend');
      const checkIcon = selectBox.querySelector('.fa-check');
      
      item.addEventListener('click', function(e) {
        e.stopPropagation();
        
        // 切换选中状态
        selectBox.classList.toggle('selected');
        checkIcon.style.display = selectBox.classList.contains('selected') ? 'block' : 'none';
      });
    });
    
    // 分享选项点击事件
    const shareOptions = document.querySelectorAll('.share-option, .share-action-btn');
    shareOptions.forEach(option => {
      option.addEventListener('click', function(e) {
        // 取消按钮不显示提示
        if (this.classList.contains('cancel-btn')) return;
        
        // 获取分享方式
        let shareMethod = this.querySelector('.share-label')?.textContent || 
                         this.textContent.trim() || 
                         '分享';
        
        alert(`已选择${shareMethod}方式`);
        closeAllModals();
      });
    });
  </script>
</body>
</html>
